<template>
	<div style="margin-top: 10px">
		<el-container>
			<el-header>
				<div></div>
				<div>
					<el-button type="primary" icon="el-icon-plus">
						添加教师
					</el-button>					
				</div>
			</el-header>
			<el-main>
				
				<el-table 
					:data="teachBuilds"
	                stripe
					fit
	                overflow=auto
	                v-loading="loading"
	                element-loading-text="正在加载..."
	                element-loading-spinner="el-icon-loading"
	                element-loading-background="rgba(0, 0, 0, 0.8)"
	                style="width: 100%"
					height="380">
					<el-table-column type="expand">
						    <template slot-scope="scope">
								<el-table
									:data="scope.row.children"
								    stripe
									fit
								    overflow=auto
								    v-loading="loading"
								    element-loading-text="正在加载..."
								    element-loading-spinner="el-icon-loading"
								    element-loading-background="rgba(0, 0, 0, 0.8)"
								    style="width: 100%"
									:header-cell-style="{background:'#909399',color:'#303133'}">>
									<el-table-column type="selection" fixed="left"></el-table-column>
									<el-table-column prop="classroomNo" label="教室" align="center" fixed="left"></el-table-column>
									<el-table-column prop="capacity" label="教室容量" align="center" fixed="left"></el-table-column>
									<el-table-column label="操作" align="center" fixed="right">
										<template slot-scope="scope">
											<el-button style="padding: 7px" size="mini" 
											icon="el-icon-edit"></el-button>
											<el-button style="padding: 7px" size="mini" 
											type="danger" icon="el-icon-delete"></el-button>
										</template>
									</el-table-column>
								</el-table>
							</template>
					</el-table-column>
					<el-table-column type="selection" fixed="left"></el-table-column>
					<el-table-column prop="teachBuildName" label="楼名" align="center" fixed="left"></el-table-column>
					<el-table-column prop="deptName" label="所属院系" align="center" fixed="left"></el-table-column>
					<el-table-column label="操作" align="center" fixed="right">
						<template slot-scope="scope">
							<el-button style="padding: 7px" size="mini" 
							icon="el-icon-edit"></el-button>
							<el-button style="padding: 7px" size="mini" 
							type="danger" icon="el-icon-delete"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-main>
			<el-footer>
				<div>
					<el-pagination
					  background
					  @current-change="currentChange"
					  @size-change="sizeChange"
					  layout="prev, pager, next, jumper, ->, total, slot"
					  :total="total">
					</el-pagination>
				</div>
								
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default{
		data() {
		    return {
		       teachBuilds: [],
			   loading: false,
			   total: 0,
			   page:1,
			   size:10,
			   title:'',
			   }
		},
		
		mounted:function() {
			this.loadBuilds();
		},
		
		methods: {
			sizeChange(currentSize) {
				this.size = currentSize;
				this.loadUsers();
					},
			 currentChange(currentPage) {
				this.page = currentPage;
				this.loadUsers();
					},
		    loadBuilds(){
			   this.loading = true;
			   let url = '/teachBuild/basic/?page=' + this.page +'&pageSize='+this.size;
			    
				if (this.name) {
					url = '/teachBuild/basic/selectInfo?name=' + this.name + '&page='+ this.page +'&pageSize='+this.size;
				}
				
			   this.getRequest(url).then(resp =>{
				   this.loading = false;
				   if(resp){
					   this.teachBuilds = resp.teachBuilds;
					   this.total = resp.count;
				   }
			   })
		   }
		}
	}
</script>

<style>
	.el-main {
	    color:  #E9EEF3;
	    line-height: 20px !important;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	.el-footer {
	    position:fixed;
		bottom:10px;
		left: 0;
		right: 0;
		line-height:60px;
	  }
	.el-pagination {
		display: flex;
		justify-content: flex-end;
		text-align: center;
	}
</style>
